<template>
    <div class="category" >
      <nav-bar class="nav-bar">
        <template v-slot:center><div>分类</div></template>
      </nav-bar>
      <div class="category-content">
        <scroll class="content-side" :pull-up-load="true"  ref="scroll" >
          <category-side :categoryList="categoryList" @handleClick="handleClick"></category-side>
        </scroll>
        <scroll class="content" :pull-up-load="true">
          <category-side-content :subCategoryList="subCategoryList"></category-side-content>
        </scroll>
      </div>
    </div>

    
</template>

<script>
  import NavBar from '../../components/common/navbar/NavBar.vue'
  import CategorySide from './childComps/CategorySide.vue'
  import Scroll from '../../components/common/scroll/Scroll.vue'
  import CategorySideContent from './childComps/CategorySideContent.vue';

  import {getAllCategory,getSubCategory} from '../../network/category.js'
  export default {
    name: "Category",
    components: {
      NavBar,
      CategorySide,
      Scroll,
      CategorySideContent
    },
    data(){
      return{
        categoryList:[],
        subCategoryList: [],
        subCategoryMaitKey:'',
      }
    },
    created () {
      getAllCategory().then(res =>{
        this.categoryList = res.data.category.list
        this.subCategoryMaitKey = res.data.category.list[0].maitKey;
        return this.subCategoryMaitKey
      }).then(key =>{
        this.getSubCategory(key)
      })
    },
    activated () {
      this.$refs.scroll.refresh()
    },
    methods: {
      handleClick(maitKey){
        this.getSubCategory(maitKey)
      },
      getSubCategory(key){
        getSubCategory(key).then(res=>{
                this.subCategoryList = res.data.list;
                // console.log(this.subCategoryList);
                this.$refs.scroll.scrollTo(0,0,500);
            })
      }
    }
  }
</script>

<style scoped>
  .nav-bar{
    background-color: var(--color-tint);
    color:#fff;
    
  }
  .category {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.category-content{
  height: 100vh;
}
.content-side{
    overflow: hidden;
    height: calc(100% - 44px - 49px);
    width: 100px;
  }
  .content{
    overflow: hidden;
    height: calc(100% - 44px - 49px);
    position: absolute;
    left: 100px;
    right: 0;
    top: 44px;
    bottom: 49px;
    width: calc(100% - 100px);
  }
</style>
